<template>
	<view class="content">
		<view class="top">
			<h3>重要的事情</h3>
		</view>
		<!-- 左右滑动日期 -->
		<!-- <view class="box">
			<scroll-view scroll-x="true">
				<block v-for="(item, index) in dayList" :key="index">
					<view class="dayTitle" :class="current == index ? 'select' : ''" @click="timeSelectd(index)">
						<view
							style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;">
							<view>{{ item.day }}</view>
							<view v-if="index == 0" style="font-size: 25rpx;">今天</view>
							<view v-else style="font-size: 25rpx;">星期{{ item.week }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view> -->

		<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'></ren-calendar>

		<view class="time">
			<text class="title">聚焦要事</text>
			<y-steps :stepList="stepList"></y-steps>
		</view>
		
		<NewBtn />
	</view>
</template>

<script>
	import Vue from 'vue';
	import common from './common.js';
	import YSteps from '@/components/YSteps'
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	
	import NewBtn from '../../components/newBtn.vue'
	export default {
		data() {
			return {
				isShow: false,
				current: 0,
				dayList: [],
				xzTime: common.GetNowTime(new Date()),
				stepList: [{
						date: '12:00',
						info: '午饭',
						isFinished: true,
						tagColor: "primary",
						tagTitle: "日常吃饭"
					},
					{
						date: '13:00',
						info: '睡觉',
						isFinished: false,
						tagColor: "success",
						tagTitle: "规律生活"
					},
					{
						date: '14:00',
						info: '大学生就业指导',
						isFinished: true,
						tagColor: "warning",
						tagTitle: "课堂规划"
					},
					{
						date: '16:00',
						info: '计算机原理',
						isFinished: false,
						tagColor: "warning",
						tagTitle: "课堂规划"
					},
					{
						date: '18:00',
						info: '晚饭',
						isFinished: false,
						tagColor: "primary",
						tagTitle: "日常吃饭"
					},
				],
				curDate: '',
				markDays: []
			}
		},
		onLoad() {
			this.dayList = common.weekDate().dayList;
			console.log('aa',this.$refs)
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		methods: {
			// 日期选择
			timeSelectd(index) {
				this.current = index;
				let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day;
				date = common.GetNowTime(new Date(date));
				this.xzTime = date;
				console.log(this.xzTime);
			},
			onDayClick(data) {
				this.curDate = data.date;
			}

		},
		components: {
			YSteps,
			RenCalendar,
			NewBtn
		}
	}
</script>

<style>
	page {
		height: 100%;
		position: fixed;
	}

	.content {
		height: 100%;

	}

	.top {
		height: 120rpx;
		position: relative;
	}

	.top h3 {
		position: absolute;
		bottom: 0;
		margin-left: 40rpx;
	}

	.box {
		margin-top: 40rpx;
		padding: 30rpx;
		box-shadow: 0px 6px 22px #e6e6e6;
	}

	scroll-view {
		padding: 20rpx 0;
		width: 100%;
		white-space: nowrap;
	}

	.dayTitle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-left: 20rpx;
		text-align: center;
		display: inline-block;
	}

	.select {
		color: #ffffff;
		background-color: #83cbac;
	}

	.time {
		box-sizing: border-box;
		width: 92%;
		height: 55%;
		margin: 0 auto;
		border-radius: 20rpx;
		box-shadow: 0px 4px 10px #d1d9e6;
		/* padding-top: 40rpx; */
		padding: 40rpx 40rpx;
		overflow-y: scroll;
	
	}

	.time .title {
		margin-left: 30rpx;
		/* margin-top: 50rpx; */
		font-weight: bold;
		font-size: 34rpx;
	}
</style>
